<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07_表单</title>
</head>
<body>

    <!--必须记住-->
    <!--form表示整个表单 action属性用于提交表单收集的数据， #占位符，暂时提交到本页-->
    <!--input：是表单的输入控件
        name：控制控件的名字，没有name的控件无法提交
        value:默认存在，用来保存用户在控件中输入的值，也可以设置输入框的默认值与按钮上显示的文字
        readonly:单值属性，只读，用户无法修改，但可以提交
        disabled:单值属性，禁用，用户无法修改，也无法提交
        placeholder：提示文本占位符-->
    <form action="#">
        姓名1：<input type="text" name="uname1"><br>
        姓名2：<input type="text" name="uname2" placeholder="请输入您的姓名："><br>
        姓名3：<input type="text" name="uname3" value="迪丽热巴"><br>
        姓名4：<input type="text" name="uname4" value="迪丽热巴" readonly><br>
        姓名5：<input type="text" name="uname5" value="迪丽热巴" disabled><br>
        密码 ：<input type="password" name="upwd" maxlength="6" placeholder="请输入密码"><br>
        性别 ：<input type="radio" name="gender" value="男">男
              <input type="radio" name="gender" value="女">女<br>
        爱好 ：<input type="checkbox" name="like" value="cy" checked>抽烟
              <input type="checkbox" name="like" value="hj">喝酒
              <input type="checkbox" name="like" value="tt">烫头<br>
        <!--h5新增功能-->
        幸运色：<input type="color" name="lc"><br>
        缩放 :<input type="range" name="sf"><br>
        生日 ：<input type="date" name="birthday"><br>
        文件:<input type="file" name="file"><br>
        <!--关联效果-->
        <input type="checkbox" id="ok">
        <label for="ok">我同意以上协议</label><br>
        <!--关联效果2:点击文字即可让输入框获取输入焦点-->
        <label for="n1">昵称</label>
        <input type="text" name="nickname" id="n1" placeholder="请输入昵称："><br>
        <!--下拉框-->
        喜欢的城市：<select name="city">
            <option value="beijing">北京</option>
            <option value="shanghai" selected>上海</option>
            <option value="guangzhou">广州</option>
            <option value="shenzhen">深圳</option>
        </select><br>

        <!--留言板-->
        留言板：<textarea name="lyb" style="resize: none;"></textarea><br>

        <input type="submit" value="提交按钮">
        <input type="reset" value="重置按钮">
        <input type="button" value="普通按钮">
        <button>普通按钮</button><!--跟前一行效果一样-->

        <!--type属性控制控件的类型
          text普通文本输入框  password密码框  radio单选框  checkbox多选框
          file上传文件  date日期  color颜色  range范围
          submit提交按钮  reset重置按钮  button普通按钮-->
    </form>
</body>
</html>